
 <template>
  <div id="container" style="height: 100%; width: 100%"></div>
</template>
<script>
import { BMPGL } from 'utils/bmpgl.js'
export default {
  name: 'tostock',
  data () {
    return {
      ak: 'uvN6vatvU44OQ0a9yuXdQZxTXODHGuLI&callback', // 百度的地图密钥
      myMap: null,
      greenIcon: null,
      purpleIcon: null,
      yellowIcon: null,
      redIcon: null,
      point: null,

      styleJson: [{
        'featureType': 'water',
        'elementType': 'all',
        'stylers': {
          'color': '#044161'
        }
      }, {
        'featureType': 'land',
        'elementType': 'all',
        'stylers': {
          'color': '#091934'
        }
      }, {
        'featureType': 'boundary',
        'elementType': 'geometry',
        'stylers': {
          'color': '#064f85'
        }
      }, {
        'featureType': 'railway',
        'elementType': 'all',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'highway',
        'elementType': 'geometry',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'highway',
        'elementType': 'geometry.fill',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'highway',
        'elementType': 'labels',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'arterial',
        'elementType': 'geometry',
        'stylers': {
          'color': '#004981',
          'lightness': -39
        }
      }, {
        'featureType': 'arterial',
        'elementType': 'geometry.fill',
        'stylers': {
          'color': '#00508b'
        }
      }, {
        'featureType': 'poi',
        'elementType': 'all',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'green',
        'elementType': 'all',
        'stylers': {
          'color': '#056197',
          'visibility': 'off'
        }
      }, {
        'featureType': 'subway',
        'elementType': 'all',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'manmade',
        'elementType': 'all',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'local',
        'elementType': 'all',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'arterial',
        'elementType': 'labels',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'boundary',
        'elementType': 'geometry.fill',
        'stylers': {
          'color': '#029fd4'
        }
      }, {
        'featureType': 'building',
        'elementType': 'all',
        'stylers': {
          'color': '#1a5787'
        }
      }, {
        'featureType': 'label',
        'elementType': 'all',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'poi',
        'elementType': 'labels.text.fill',
        'stylers': {
          'color': '#ffffff'
        }
      }, {
        'featureType': 'poi',
        'elementType': 'labels.text.stroke',
        'stylers': {
          'color': '#1e1c1c'
        }
      }, {
        'featureType': 'administrative',
        'elementType': 'labels',
        'stylers': {
          'visibility': 'on'
        }
      }, {
        'featureType': 'road',
        'elementType': 'labels',
        'stylers': {
          'visibility': 'off'
        }
      }],
      cityList: [
        '河北省',
        '山西省',
        '辽宁省',
        '吉林省',
        '黑龙江省',
        '江苏省',
        '浙江省',
        '安徽省',
        '福建省',
        '江西省',
        '山东省',
        '河南省',
        '湖北省',
        '湖南省',
        '广东省',
        '海南省',
        '四川省',
        '贵州省',
        '云南省',
        '陕西省',
        '甘肃省',
        '青海省',
        '台湾省',
        '北京市',
        '天津',
        '上海',
        '重庆',
        '内蒙古自治区',
        '新疆维吾尔自治区',
        '宁夏回族自治区',
        '广西壮族自治区',
        '西藏自治区',
        '香港',
        '澳门'
      ]

    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      // 传入密钥获取地图回调
      BMPGL(this.ak)
        .then(BMapGL => {
          // 创建地图实例
          let map = new BMapGL.Map('container')
          // 初始化地图，设置中心点坐标和地图级别
          // new BMapGL.Point(118.477, 31.346)
          map.centerAndZoom('北京市', 5)
          // 开启鼠标滚轮缩放
          map.enableScrollWheelZoom(true)
          // map.setMinZoom(9)
          // map.setMaxZoom(13)
          // map.setTilt(85)
          var bd = new BMapGL.Boundary()
          this.cityList.forEach(i => this.getBound(i, bd, BMapGL, map))
          map.setMapStyleV2({ styleJson: this.styleJson })
        })
    },
    getBound (e, bd, BMapGL, map) {
      bd.get(e, function (rs) {
        var count = rs.boundaries.length // 行政区域的点有多少个
        // var pointArray = []
        for (var i = 0; i < count; i++) {
          var path = []
          var str = rs.boundaries[i].replace(' ', '')
          var points = str.split(';')
          for (var j = 0; j < points.length; j++) {
            var lng = points[j].split(',')[0]
            var lat = points[j].split(',')[1]
            path.push(new BMapGL.Point(lng, lat))
          }
          var prism = new BMapGL.Prism(path, 5000, {
            topFillColor: '#064f85',
            topFillOpacity: 0.5,
            sideFillColor: '#064f85',
            sideFillOpacity: 0.9

          })
          map.addOverlay(prism)
        }
      })
    }

  }
}
</script>
<style lang="scss" >
.BMap_cpyCtrl {
   display: none;
 }
.anchorBL {
   display: none;
}
</style>
